<template>
  <el-container class="frame-wrapper" v-loading="loading">
    <el-header class="header">
      <el-menu
        :default-active="defaultActive"
        mode="horizontal"
        @select="onSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item :index="item.id" v-for="item in menus" :key="item.id">{{item.label}}</el-menu-item>
      </el-menu>
    </el-header>
    <el-main>
      <nuxt-child />
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      defaultActive: '',
      loading: false
    }
  },
  methods: {
    onSelect(key, keyPath) {
      this.$router.replace({
        name: key
      })
    },
    async getData() {
      this.loading = true

      const data = await this.$ajax.getMenus()
      setTimeout(() => {
        this.menus = data
        this.loading = false
      }, 1000)
    }
  },
  mounted() {
    this.getData()
    this.defaultActive = this.$route.name
  }
}
</script>

<style lang="scss">
.frame-wrapper {
  height: 100vh;
  .header {
    padding: 0;
  }
}
</style>